//useContextMenu.ts
import { ref, nextTick } from 'vue'

export interface ContextMenuItem {
  label: string
  key: string
  disabled?: boolean
  onClick?: (row: any) => void
}

export function useContextMenu() {
  const showDropdown = ref(false)
  const x = ref(0)
  const y = ref(0)
  const selectedRow = ref<any>(null)

  // 右键菜单处理
  function rowProps(row: any) {
    return {
      onContextmenu: (e: MouseEvent) => {
        e.preventDefault()
        selectedRow.value = row
        showDropdown.value = false
        nextTick().then(() => {
          showDropdown.value = true
          x.value = e.clientX
          y.value = e.clientY
        })
      }
    }
  }

  function handleSelect(key: string) {
    showDropdown.value = false
  }

  function onClickOutside() {
    showDropdown.value = false
    selectedRow.value = null
  }

  return {
    showDropdown,
    x,
    y,
    selectedRow,
    rowProps,
    handleSelect,
    onClickOutside
  }
}
